import React from 'react';
import {Row, Col, Slider, Button, Switch, Input} from 'antd';
import uiStore from '../store/uiStore';
import ThreeD from './ThreeD';

import type1 from '../images/type_1.png';
import type2 from '../images/type_2.png';
import type3 from '../images/type_3.png';
import type4 from '../images/type_4.png';

const marks = {
  0: '0°C',
  25: '25°C',
  50: '50°C',
  75: '75°C',
  100: '100°C',
};

export  default class Config extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      type: 0,
      matirial: 0,
      color: 0,
    };
  }

  render() {
    const {type, matirial, color } = this.state;
    const {setWidth, setHeight, zoomIn, zoomOut, generateModel} = uiStore;

    return (
      <div>
        <div className="DDD">
            <ThreeD />
        </div>
        <div className="select">
            <p className="type">类型</p>
            <ul>
                <li className={type == 0 ? "selected" : ""}>
                  <img src={type1} height="100%" width="100%"
                    onClick={(e) => {this.setState(Object.assign({}, this.state, {type: 0}));}}
                  />
                </li>
                <li className={type == 1 ? "selected" : ""}>
                  <img src={type2} height="100%" width="100%"
                    onClick={(e) => {this.setState(Object.assign({}, this.state, {type: 1}));}}
                  />
                </li>
                <li className={type == 2 ? "selected" : ""}>
                  <img src={type3} height="100%" width="100%"
                    onClick={(e) => {this.setState(Object.assign({}, this.state, {type: 2}));}}
                  />
                </li>
                <li className={type == 3 ? "selected" : ""}>
                  <img src={type4} height="100%" width="100%"
                    onClick={(e) => {this.setState(Object.assign({}, this.state, {type: 3}));}}
                  />
                </li>
            </ul>
        </div>
        <div className="select">
            <p className="type">材料</p>
            <ul>
                <li className={matirial == 0 ? "selected" : ""}
                  style={{backgroundColor: 'rgb(230,254,231)'}}
                  onClick={(e) => {this.setState(Object.assign({}, this.state, {matirial: 0}));}}>
                 <p>Silicon</p>
                </li>
                <li className={matirial == 1 ? "selected" : ""}
                  style={{backgroundColor: 'rgb(254,239,182)' }}
                  onClick={(e) => {this.setState(Object.assign({}, this.state, {matirial: 1}));}}>
                 <p>Wood</p>
                </li>
            </ul>
        </div>
        <div className="select">
            <p className="type">颜色</p>
            <ul>
                <li className={color == 0 ? "selected" : ""}
                  style={{backgroundColor: 'gray'}}
                  onClick={(e) => this.setState(Object.assign({}, this.state, {color: 0}))}>
                </li>
                <li className={color == 1 ? "selected" : ""}
                  style={{backgroundColor: 'blue'}}
                  onClick={(e) => this.setState(Object.assign({}, this.state, {color: 1}))}>
                </li>
                <li className={color == 2 ? "selected" : ""}
                  style={{backgroundColor: 'yellow'}}
                  onClick={(e) => this.setState(Object.assign({}, this.state, {color: 2}))}>
                </li>
                <li className={color == 3 ? "selected" : ""}
                  style={{backgroundColor: 'green'}}
                  onClick={(e) => this.setState(Object.assign({}, this.state, {color: 3}))}>
                </li>
                <li className={color == 4 ? "selected" : ""}
                  style={{backgroundColor: 'pink'}}
                  onClick={(e) => this.setState(Object.assign({}, this.state, {color: 4}))}>
                </li>
                <li className={color == 5 ? "selected" : ""}
                  style={{backgroundColor: 'black'}}
                  onClick={(e) => this.setState(Object.assign({}, this.state, {color: 5}))}>
                </li>
            </ul>
        </div>
      </div>
    );
  }
}
